<template>
  <div class="container">
    <baidu-map class="box" :center="center" :scrollWheelZoom="true" :zoom="zoom" @ready="handler" @zoomend="getZooms" @moveend="getCenters">
      <bm-control style="height: 100%">
        <div class="input_class">
          <el-input prefix-icon="el-icon-tickets" clearable v-model="park_name" suffix-icon="el-icon-search"
                    autocomplete="on" type="text" @keyup.enter.native="findPark" placeholder="停车场名称/拼音首字母/回车查询"/>
        </div>
        <div class="park_card">
          <width-vertical>
            <div class="card_left" v-show="item3Seem">
              <div class="card_head">
                <span class="title_span">共计<strong>{{parkNums}}</strong>个道路停车场</span>
              </div>
              <div class="card_main">
                <div class="sortData">
                  <el-row>
                    <el-col :xs="24" :lg="24" :sm="24" :md="24">
                      <el-dropdown trigger="click" @command="handleCommand">
                        <span class="el-dropdown-link" style="color: #66b1ff;">
                          默认排序<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="down">剩余泊位由高到低</el-dropdown-item>
                        <el-dropdown-item command="up">剩余泊位由低到高</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                    </el-col>
                  </el-row>
                </div>
                <el-table
                  :data="tableData3"
                  height="100%"
                  v-loading="loading"
                  border
                  @row-dblclick="positionMarker"
                  fit
                  :show-header="false"
                  stripe
                  style="width: 100%">
                  <el-table-column>
                    <template slot-scope="scope">
                      <el-row>
                        <el-col :xs="20" :lg="20" :sm="20" :md="20">
                          <span style="margin-left: 10px;"><strong>{{ scope.row.parkname }}</strong>
                            <el-button class="spanBtn" v-if="scope.row.status === '1'" type="text" size="mini">{{ scope.row.statusname }}</el-button>
                            <el-button class="spanBtn" style="color: red;" v-if="scope.row.status === '2'" type="text" size="mini">{{ scope.row.statusname }}</el-button>
                          </span>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :xs="16" :lg="16" :sm="16" :md="16">
                          <span class="detailMes" style="margin-left: 10px">{{scope.row.dllxname}}/总计{{scope.row.placenum}}个泊位/在停{{scope.row.placenum - scope.row.remaincount}}</span>
                        </el-col>
                        <el-col :xs="8" :lg="8" :sm="8" :md="8">
                          <span class="reduicesMsg">剩余
                            <strong>{{ scope.row.remaincount }}个</strong>
                          </span>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="card_footer">
                <el-pagination
                  background
                  small
                  @current-change="handleCurrentChange"
                  layout="pager"
                  :total="dataCount">
                </el-pagination>
              </div>
            </div>
          </width-vertical>
          <width-vertical>
            <div class="card_left" v-show="itemDetail">
              <div class="head_det">
                <el-row class="sj" style="margin-top: 10px">
                  <el-col :xs="18" :lg="18" :sm="18" :md="18">
                    <span style="font-size: 16px;"><strong>{{ parkDetail.parkname }}</strong>
                      <el-button class="spanBtn" v-if="parkDetail.status === '1'" type="text" size="mini">{{ parkDetail.statusname }}</el-button>
                      <el-button class="spanBtn" style="color: red;" v-if="parkDetail.status === '2'" type="text" size="mini">{{ parkDetail.statusname }}</el-button>
                    </span>
                  </el-col>
                  <el-col :xs="4" :lg="4" :sm="4" :md="4">
                    <el-button class="btnSearch1" type="primary" @click="backPage">返回上页</el-button>
                  </el-col>
                </el-row>
                <el-row class="sj">
                  <p><span class="label_span">停车场编号：</span>{{ parkDetail.parkno }}</p>
                  <p><span class="label_span">所属单位：</span>{{ parkDetail.ssdwname }}</p>
                  <p><span class="label_span">收费标准：</span>{{ parkDetail.sfbzname }}</p>
                  <p><span class="label_span">停车位信息：</span>{{ parkDetail.placenum }}个泊位，{{ parkDetail.remaincount }}个可用</p>
                </el-row>
              </div>
              <div class="card_main ss">
                <el-row style="text-align: right">
                  <el-dropdown trigger="click" @command="handleCommand">
                        <span class="el-dropdown-link" style="color: #66b1ff;">
                          默认排序<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="placeNo">按泊位编号排序</el-dropdown-item>
                      <el-dropdown-item command="money_down">欠费金额由高到低</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-row>
                <el-table
                  :data="tableData4"
                  height="100%"
                  v-loading="loading2"
                  border
                  fit
                  stripe
                  @row-click="searchDetail"
                  style="width: 100%">
                  <el-table-column label="泊位信息">
                    <template slot-scope="scope">
                      <el-row>
                        <el-col :xs="8" :lg="8" :sm="8" :md="8">
                          <div class="left_row">
                            <div v-if="scope.row.account_imgpath === '' || scope.row.account_imgpath === null" style="width: 100%;height: 100%;;background-color: gray"></div>
                            <img v-else style="width: 100%;height: 100%;background-color: gray" :src="scope.row.account_imgpath"/>
                          </div>
                        </el-col>
                        <el-col :xs="16" :lg="16" :sm="16" :md="16">
                          <div class="right_row">
                            <p><span class="label_span">泊位编号：</span>{{scope.row.place_no}}</p>
                            <div v-if="scope.row.account_carno === '' || scope.row.account_carno === null"></div>
                            <div v-else>
                              <span class="label_span">车牌号：{{scope.row.account_carno}}</span><br/>
                              <span class="label_span">车辆类型：{{scope.row.account_cartypename}}</span><br/>
                              <span class="label_span">欠费金额：{{scope.row.repay_cost}}</span><br/>
                              <span class="label_span">地磁检测时间：{{scope.row.dc_updatetime}}</span><br/>
                              <span class="label_span">入场取证时间：{{scope.row.account_intime}}</span>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </width-vertical>
          <div class="card_right">
            <el-row></el-row>
            <el-row></el-row>
            <el-row>
              <el-button v-show="openBtn" @click="openDia":icon="iconDown"></el-button>
              <el-button v-show="closeBtn" @click="cloaseDia":icon="iconUp"></el-button>
            </el-row>
          </div>
        </div>
      </bm-control>
      <bm-marker v-show="markShow"
                 :top="true"
                 :position="labelPosition"
                 :dragging="true"
                 :icon="{url: '../src/assets/map_images/tantiao.png', size: {'width':30,'height':50}}"
                 :offset="{'width':0,'height':0}"
                 animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <bm-marker v-for="item in coordinate1"
                :position="{lng: item.longitude, lat: item.latitude}"
                 :icon="{url: '../src/assets/map_images/markersfull.png', size: {'width':30,'height':50}}"
                :offset="{'width':0,'height':0}"
                 @click="openInfo(item)">
        <bm-label :content="item.placenum.toString()" :zIndex="10000" :labelStyle="labelStyle" :offset="{width: 0, height: 0}"/>
      </bm-marker>
      <bm-marker v-for="item in coordinate2"
                 :position="{lng: item.longitude, lat: item.latitude}"
                 :icon="{url: '../src/assets/map_images/markersidle.png', size: {'width':30,'height':50}}"
                 :offset="{'width':0,'height':0}"
                 @click="openInfo(item)">
        <bm-label :content="item.placenum.toString()" :zIndex="10000" :labelStyle="labelStyle" :offset="{width: 0, height: 0}"/>
      </bm-marker>
      <bm-marker v-for="item in coordinate3"
                 :position="{lng: item.longitude, lat: item.latitude}"
                 :icon="{url: '../src/assets/map_images/markersoffduty.png', size: {'width':30,'height':50}}"
                 :offset="{'width':0,'height':0}"
                 @click="openInfo(item)">
        <bm-label :content="item.placenum.toString()" :zIndex="10000" :labelStyle="labelStyle" :offset="{width: 0, height: 0}"/>
      </bm-marker>
      <bm-info-window :position="{lng: infoWindow.longirude, lat: infoWindow.latitude}" :show="show"
                      @close="infoWindowClose" @open="infoWindowOpen">
        <p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>{{this.infoWindow.title}}</strong></p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">停车场编号：{{this.infoWindow.parkNo}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">所属单位：{{this.infoWindow.dw}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">收费标准：{{this.infoWindow.chargeType}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">
          停车位信息：{{this.infoWindow.totalNum}}个泊位，{{this.infoWindow.surplus}}个可用</p>
      </bm-info-window>
    </baidu-map>
    <parking-img-dialog :parkVisible.sync="parkVisible" :imgChild="imgChild"></parking-img-dialog>
  </div>
</template>

<script>
  import { selParking } from '../../api/dashboard'
  import { selParkingRemainPlace } from '../../api/dashboard'
  import widthVertical from '../../utils/widthVertical'
  import { selectParking, selectPlaceNo } from '../../api/dataMonitoring/parkingMonitoring'
  import { selDictonaryValue } from '../../api/dictionary'
  import ParkingImgDialog from './parkingMonitoringChild/parkingImgDialog'

  export default {
    components: {
      ParkingImgDialog,
      widthVertical },
    data() {
      return {
        sortingWay: '1', // 默认排序方式 剩余泊位由高到低  2： 剩余泊位由低到高
        placeWay: '2', // 默认排序方式 按欠费金额排序  2： 按泊位排序
        placeNo: '', // 泊位编号
        parkDetail: {},
        imgChild: '',
        parkVisible: false,
        loading2: false,
        openBtn: true,
        closeBtn: false,
        markShow: false,
        center: {
          lng: 0,
          lat: 0
        },
        labelPosition: {
          lng: 0,
          lat: 0
        },
        zoom: 3,
        dataCount: 0,
        loading: false,
        tableData3: [],
        // 道路停车详情页面模拟数据
        tableData4: [],
        lng: '',
        lat: '',
        park_name: '',
        parkNums: '',
        iconUp: 'el-icon-arrow-left',
        iconDown: 'el-icon-arrow-right',
        item3Seem: false,
        itemDetail: false,
        isDisplay: false,
        pageNum: 1,
        show: false,
        infoWindow: {
          longirude: 0,
          latitude: 0,
          title: '',
          parkNo: '',
          dw: '',
          chargeType: '',
          totalNum: '',
          surplus: ''
        },
        coordinate1: [],
        coordinate2: [],
        coordinate3: [],
        labelStyle: {
          backgroundColor: 'transparent',
          color: '#fff',
          border: '0px',
          fontSize: '14px',
          fontWeight: '300',
          zIndex: 100000,
          width: '28px',
          height: '37px',
          textAlign: 'center',
          lineHeight: '33px'
        }
      }
    },
    mounted: function() {
      selParking('1').then(res => {
        for (var i = 0; i < res.length; i++) {
          if (res[i].sfbz === 'SFBZ01') {
            this.coordinate1.push(res[i])
          } else if (res[i].sfbz === 'SFBZ02') {
            this.coordinate2.push(res[i])
          } else {
            this.coordinate3.push(res[i])
          }
        }
      })
      this.selectParks(this.pageNum)
    },
    methods: {
      // 排序查找道路停车场以及该停车场对应的泊位
      handleCommand(val) {
        if (val === 'down') {
          this.sortingWay = '2'
          this.selectParks()
        } else if (val === 'up') {
          this.sortingWay = '1'
          this.selectParks()
        } else if (val === 'placeNo') {
          console.log('按泊位排序')
          this.placeWay = '2'
          this.selPlaceNum()
        } else {
          console.log('欠费金额由高到低')
          this.placeWay = '1'
          this.selPlaceNum()
        }
      },
      // 实时获取地图中心点
      getCenters(val) {
        this.center.lng = val.target.gf.lng
        this.center.lat = val.target.gf.lat
      },
      // 实时获取地图缩放级别
      getZooms(val) {
        this.zoom = val.target.Oa
      },
      // 地图初始化时设置zoom和中心点
      handler() {
        this.center.lng = 117.033083
        this.center.lat = 36.675795
        this.zoom = 13
      },
      findPark() {
        this.selectParks()
      },
      // 双击道路停车场展开详情页面和定位该车场
      positionMarker(val) {
        this.item3Seem = false
        this.itemDetail = true
        this.parkDetail = val
        const $this = this
        this.placeNo = val.parkno
        this.selPlaceNum()
        if (val.park_long === null || val.park_lati === null) {
          $this.$message.error('无效的坐标')
          return
        }
        this.labelPosition.lng = val.longitude
        this.labelPosition.lat = val.latitude
        this.center.lng = val.longitude
        this.center.lat = val.latitude
        this.zoom = 16
        setTimeout(function() {
          $this.labelPosition.lng = ''
          $this.labelPosition.lat = ''
        }, 3000)
      },
      // 查询泊位列表
      selPlaceNum() {
        this.loading2 = true
        selectPlaceNo(this.placeNo, this.placeWay).then(res => {
          console.log(res)
          this.loading2 = false
          this.tableData4 = res
        })
      },
      // 关闭信息窗体
      infoWindowClose(e) {
        this.show = false
      },
      // 开启信息窗体
      infoWindowOpen(e) {
        this.show = true
      },
      // 页码改变触发
      handleCurrentChange(val) {
        this.pageNum = val
        this.selectParks()
      },
      // 打开信息窗体
      openInfo(val) {
        selParkingRemainPlace(val.parkno).then(res => {
          this.popoName = val.parkno
          this.infoWindow.title = val.parkname
          this.infoWindow.longirude = val.longitude
          this.infoWindow.latitude = val.latitude
          this.infoWindow.parkNo = val.parkno
          this.infoWindow.dw = val.ssdwname
          this.infoWindow.totalNum = val.placenum
          this.infoWindow.chargeType = val.sfbzname
          this.infoWindow.surplus = res.park_remaincount
          this.show = true
        })
      },
      // 查询道路停车场
      selectParks() {
        this.loading = true
        selectParking(this.pageNum, this.park_name, this.sortingWay).then(res => {
          selDictonaryValue(res).then(resp => {
            this.tableData3 = resp.list
            this.dataCount = resp.count
            this.parkNums = resp.count
            this.loading = false
          })
        })
      },
      // 展开左侧隐藏的面板
      openDia() {
        this.item3Seem = true
        this.closeBtn = true
        this.openBtn = false
      },
      // 关闭左侧面板
      cloaseDia() {
        this.item3Seem = false
        this.itemDetail = false
        this.closeBtn = false
        this.openBtn = true
      },
      // 返回上一页
      backPage() {
        this.itemDetail = false
        this.item3Seem = true
      },
      /* 查看取证照片 */
      searchDetail(val) {
        if (val.account_imgpath === '' || val.account_imgpath === null) {
          return
        }
        this.imgChild = val.account_imgpath
        this.parkVisible = true
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  /*覆盖element-ui的样式*/
  .park_card{
    .el-table{
      .cell{
        line-height: 23px;
      }
    }
  }

</style>
<style scoped>
  .sortData .el-col{
    text-align: right;
  }
  .left_row{
    width: 100%;
    height: 130px;
  }
  .right_row{
    padding-left: 6px;
    width: 100%;
    height: 130px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
  }
  .right_row p{
    margin: 0;
  }
  .sj{
    margin-left: 10px;
  }
  .label_span{
    color: gray;
  }
  .head_det{
    width: 100%;
    font-family: MicrosoftYaHei;
    font-size: 12px;
  }
  .btnSearch1{
    width: 60px;
    height: 20px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    padding: 4px 4px;
  }
  .spanBtn {
    width: 40px;
    height: 24px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    padding: 4px 8px;
    margin-left: 6px;
  }
  .detailMes {
    color: gray;
    font-family: MicrosoftYaHei;
    font-size: 12px;
  }
  .table_head{
    width: 270px;
    z-index: 9999;
    padding-left: 10px;
    float: left;
    top:32px;
    font-family: MicrosoftYaHei;
    color: #7A7A7A;
    font-size: 12px;
    font-weight:bold;
  }
  .reduicesMsg strong {
    color: red;
    font-family: MicrosoftYaHei;
    font-size: 18px;
    margin-left: 10px;
  }

  .reduicesMsg {
    color: gray;
    font-family: MicrosoftYaHei;
    font-size: 14px;
  }

  .container {
    position: relative;
    padding: 20px;
    width: 100%;
    height: 85vh;
  }
  .input_class{
    width: 350px;
    height: 5%;
    margin-bottom: 5px;
  }
  .el-input{
    width: 100%;
    height: 100%;
  }

  .park_card {
    width: 400px;
    height: 95%;
  }
  .card_left {
    width: 350px;
    height: 100%;
    background-color: #fff;
    float: left;
  }
  .card_right {
    float: left;
    width: 50px;
    height: 100%;
  }
  .card_head {
    height: 5%;
    padding-top: 11px;
    width: 100%;
    font-size: 16px;
    text-align: center;
    font-family: MicrosoftYaHei;
  }
  .card_main {
    width: 100%;
    height: 78%;
  }
  .card_footer {
    text-align: center;
    padding-top: 20px;
    width: 100%;
    border-top: 1px solid gray;
    height: 10%;
  }
  .card_head strong {
    color: #3b91b6;
  }
  .card_right .el-row {
    width: 100%;
    height: 15%;
  }
  .card_right .el-button {
    width: 50px;
    height: 100%;
    margin: 0px;
    background-color: #fff;
  }
  .box {
    width: 100%;
    height: 100%;
  }
</style>
